<template>
  <view class="edit-container">
    <view class="u-demo-block">
      <text class="u-demo-block__title">个人信息</text>
      <view class="u-demo-block__content">
        <u-row
          customStyle="margin-bottom: 10px"
          v-for="(item, index) in list"
          :key="index"
        >
          <u-col span="4">
            <view
              class="demo-layout"
              style="text-align: right; padding-right: 20rpx"
              >{{ Object.values(item)[0] }}</view
            >
          </u-col>
          <u-col span="8">
            <!-- <view class="demo-layout">{{Object.values(userInfo)[index]}}</view> -->
            <u-radio-group
              v-if="Object.keys(userInfo)[index] === 'sex'"
              v-model="Object.values(userInfo)[index]"
              placement="column"
            >
              <u-radio
                :customStyle="{ marginright: '8px' }"
                label="男"
                name="sex"
              >
              </u-radio>
              <u-radio label="女" name="sex"> </u-radio>
            </u-radio-group>
            <u--input
              v-else
              v-model="Object.values(userInfo)[index]"
            ></u--input>
          </u-col>
        </u-row>
      </view>
      <view class="btns">
        <u-button type="primary" text="修改" @click="flag = true"></u-button>
        <u-button text="关闭" @click="close"></u-button>
      </view>
    </view>
    <Modaluse
      v-show="flag"
      @confirm="UpdateUserInfo"
      @cancel="flag = false"
      title="确认修改？"
    />
  </view>
</template>

<script>
import Modaluse from "@/components/modal_use.vue";
import { mapState } from "vuex";
export default {
  props: ["close"],
  components: {
    Modaluse,
  },
  data() {
    return {
      //确认弹框
      flag: false,
      userInfo: {
        name: "zhangsan",
        sex: "男",
        id: "422537198943783294",
        address: "广州市黄埔区",
        phone: 13183249083,
      },
      list: [
        { name: "姓名" },
        { sex: "性别" },
        { id: "身份证号" },
        { address: "工作地址" },
        { phone: "联系电话" },
      ],
    };
  },
  methods: {
    //更改个人信息
    UpdateUserInfo() {
      this.flag = false;
    },
    afterRead(e) {
      console.log(e);
      this.userInfo.sign = e.file[0].url;
    },
  },
};
</script>

<style lang="scss">
@import "@/static/css/_px2vw.scss";
.edit-container {
  width: 60vw;
  margin: 5vw auto 0;
  .u-demo-block__title {
    display: block;
    text-align: center;
    margin-bottom: vw(15);
  }
  .u-radio-group {
    display: flex;
    flex-direction: row;
    .u-radio + .u-radio {
      margin-left: vw(8);
    }
  }
  .btns {
    display: flex;
    justify-content: center;
    uni-button {
      width: vw(100);
      height: vw(40);
      margin: vw(10);
    }
  }
  .updataPic {
    display: flex;
    .u-upload {
      .u-upload__wrap {
        uni-image {
          width: vw(100) !important;
          height: vw(40) !important;
        }
      }
    }
    .uploadBtn {
      width: vw(100);
      height: vw(40);
    }
  }
}
</style>
